{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/sama_part2.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<style type="text/css">
	html,body{
		background-color: #f3f3f3;
		width: 100%;
		height: 100%;
		margin:0;
		padding: 0;
		overflow: hidden;
	}
	#load_wrapper{
	margin-top: 2.2rem;
	}
	    .confirm_box{
    background: rgba(0,0,0,.4);
    font-size: 15px!important;
    z-index: 9999;
    text-align: center;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.confirm_box>div {
    overflow: hidden;
    position: absolute;
    left: 13.5%;
    top: 50%;
    width: 73%;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.confirm_box>div>h1 {
    font-size: 15px!important;
    font-style: normal;
    padding: 15px 10px 10px;
    color: #333;
}
.confirm_box> div > a {
    font-size: 16px !important;
    display: block;
    line-height: 40px;
    color: #007AFF;
    text-decoration: none;
    border-top: 1px solid #DBDCDC;
}
.confirm_box i{
    font-style: normal;
    float: left;
    width: 50%;
}
.confirm_box i:first-child {
    margin-right: -1px;
    border-right: 1px solid #DBDCDC;
}
</style>
{/block}
{block name="content"}
<div class="his_concern" style="height:6.75%;">
	
	<div class="go_back"></div>
	<p><strong>{$head_title}</strong></p>
</div>


{if $user_list}
<div id="load_wrapper">
	<div id="scroller">
			<div id="pullDown">
			    <span class="pullDownIcon"></span>
			</div>
		<div class="concern_number">{$total}人关注了{if $is_my}您{else}他{/if}</div>
		
		<!--有粉丝时-->
		<div class="concern_list">
			{foreach from = $user_list  item = this}
			<ul class="concern_line">
				<div class="others native_go" data-url="/FrontUserCenter/others_space/user_id/{$this.fans_info.user_id}">
					<img class="head_icon" src="{$this.fans_info.headimgurl}">
					<p1>{$this.fans_info.nickname} </p1>
				</div>
				<!--查看的人未关注时-->
				<div class="orange_box" data-user_id="{$this.fans_info.user_id}" style="{if $this.is_follow}display: none;{/if}">
					<i class="icon_add small"></i>
					<p>关注</p>
				</div>

				<!--已关注时-->
				<div class="concern_line_concerned" data-user_id="{$this.fans_info.user_id}" style="{if !$this.is_follow}display: none;{/if}">
					<div class="icon_concerned_small"></div>
					<p>已关注</p>
				</div>
			</ul>
			{/foreach}
		</div>

		<div id="pullUp">
			<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
		</div>
	</div>
</div>
{else}
<!--没有粉丝时-->
		 <div class="no_concern">
			<img class="his_detail_icon" src="/Public/Images/front/front_img/icon_noattention_personal@3x.png">
			<p class="his_detail_word">{if $is_my}我{else}他{/if}还没有任何粉丝哦</p>
		</div>
{/if}
<!--已关注弹窗-->

	<div class="PopupConcerned">
		<i class="done"></i>
		<p>关注已成功</p>
	</div>

	<div class="Popupcancel">
		<div class="done"></div>
		<p>已取消关注</p>
	</div>

	<div class="confirm_box" style="display: none;">
        <div>
            <h1>确定取消关注吗？</h1>
            <!-- <p>提示内容</p> -->
            <a><i id="confirmOk">确定</i><i id="confirmCancel">取消</i></a>
        </div>
    </div>
{/block}
{block name="js"}
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/user_fans.js"></script>
	<script>
		var total = parseInt('{$total}');
		var firstRow = parseInt('{$firstRow}');
		var user_id = parseInt('{$user_id}');
		var is_click = false;
	</script>
{literal}
<script type="text/javascript">
	var obj;
	// $('.his_concern').on('click','.return_icon',function(){
	// 	window.location.href ='/Index/my_personal_center'
	// });

	//点击关注和取消关注绑定事件
	$('.concern_list').on('click','.orange_box',function(){
		follow(1,$(this));

	});
	//取消关注
	$('.concern_list').on('click','.concern_line_concerned',function(){
		obj = $(this)
		$('.confirm_box').show();
	});

	$('#confirmOk').on('click', function(){
			$('.confirm_box').hide();
			follow(2,obj);
			obj = null;
		})

	$('#confirmCancel').on('click', function(){
		$('.confirm_box').hide();
		obj = null;
	})

	// $('.others').on('click',function(){
	// 	window.location.href = 'others_personal_center'
	// });

	//关注成功弹窗
	function showSuccess(){
		$('.PopupConcerned').fadeIn(1500);
		console.log(0);
		$('.PopupConcerned').fadeOut(1500);
	}

	//取消关注弹窗
	function showCancel(){
		$('.Popupcancel').fadeIn(1500);
		console.log(0);
		$('.Popupcancel').fadeOut(1500);

	}


	function follow(type,obj){
		var data_user_id = obj.attr('data-user_id');
		if(is_click == true) return;
		is_click = true;
		//1关注，2取关
		$.ajax({
			url:'/Front/follow_user',
			type:'post',
			data:{user_id:data_user_id},
			success:function(r){
				if(type == 1){
					if(r.code == 1){
						$('.Popupdefeat').fadeIn(1500);
						$('.Popupdefeat').fadeOut(2000);
					}else{
						native_listen('follow_user');
						obj.hide();
						obj.siblings(".concern_line_concerned").show();
						showSuccess();
					}

				}else if(type == 2){
					if(r.code == 1){
						$('.Popupdefeat').fadeIn(1500);
						$('.Popupdefeat').fadeOut(2000);
					}else{
						native_listen('follow_user');
						obj.hide();
						obj.siblings(".orange_box").show();
						showCancel();
					}
				}
				setTimeout(function () {
					is_click = false;
				},2000)

			}
		})
	}




</script>
{/literal}
{/block}